<template>
    <div class="app-container">
        <el-container>
            <!-- 上层布局 -->
            <el-header>
                <el-row>
                    <el-col :span="24">
                        <div>
                            <div style="float: left">
                                <span><b style="font-size: 20px">数据字典</b>&nbsp;<span style="color: rgba(0,0,0,.45);font-size: 14px">这里是基础数据定义</span></span>
                            </div>
                            <div style="float: right">
                                <el-button type="primary" @click="handleBusinessData">业务对象管理</el-button>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="color: rgba(0,0,0,.85);font-size: 14px">
                    <el-col :span="8">
                        <span>业务对象：{{businessDataList.length}} 类</span>
                    </el-col>
                    <el-col :span="8">
                        <span>当前菜单字典类型：{{basicTypeList.length}} 类</span>
                    </el-col>
                    <el-col :span="8">
                        <span>当前菜单字典项：{{basicDataList.length}} 个</span>
                    </el-col>
                </el-row>
            </el-header>
<!--       下层布局     -->
            <el-main>
                <!-- 业务对象选项卡 -->
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane v-for=" businessData in businessDataList" :label="businessData.name" :name="businessData.id" />
                </el-tabs>
                <!-- 字典数据类型选项卡 -->
                <el-tabs tab-position="left" v-model="activeTypeName" @tab-click="handleTypeClick" >
                    <el-tab-pane v-for=" basicType in basicTypeList" :label="basicType.name" :name="basicType.code" >
                        <!-- 字典数据 -->
                        <div>
                            <el-row :gutter="10" class="mb8">
                                <el-col :span="1.5">
                                    <el-button type="primary" size="medium" @click="handleDictType">数据字典管理</el-button>
                                </el-col>
                                <el-col :span="1.5">
                                    <el-button type="primary" icon="el-icon-plus" size="medium" @click="handleDictData">新增{{typeName}}</el-button>
                                </el-col>
                            </el-row>
                            <!--  搜索栏  -->
                            <el-form :model="queryParams" ref="queryForm" style="margin-top: 10px;" :inline="true" label-width="100px">
                                <el-form-item label="字典名称" prop="name">
                                    <el-input v-model="queryParams.name" placeholder="请输入字典名称" clearable size="small"/>
                                </el-form-item>
                                <el-form-item label="字典编号" prop="code">
                                    <el-input v-model="queryParams.code" placeholder="请输入完整编号" clearable size="small"/>
                                </el-form-item>

                                <el-form-item style="margin-left: 10px;">
                                    <el-button type="primary" icon="el-icon-search" size="mini"  @click="getLevelThreedata">搜索</el-button>
                                    <el-button icon="el-icon-refresh" size="mini" style="margin-left: 10px;" @click="resetQuery" >重置</el-button>
                                </el-form-item>
                            </el-form>

<!--                   max-height="280"         -->
                            <el-table v-loading="loading" :data="basicDataList.slice((currentPage-1)*pageSize,currentPage*pageSize)" >
                                <el-table-column align="center" type="index" label="序号" ></el-table-column>
                                <el-table-column label="中文名称" align="center" prop="name"  />
                                <el-table-column label="英文名称" align="center" prop="enName"  />
                                <el-table-column label="编号" align="center" prop="code" />
                                <el-table-column label="创建时间" align="center" prop="creationDate" width="180">
                                    <template slot-scope="scope">
                                        <span>{{ parseTime(scope.row.creationDate) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                                    <template slot-scope="scope">
                                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEditDictData(scope.row)">编辑</el-button>
                                        <el-button size="mini" type="text" icon="el-icon-delete" @click="onDelete(scope.row.id)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <pagination v-show="basicDataList.length>0"
                                    :total="basicDataList.length"
                                    :page.sync="currentPage"
                                    :limit.sync="pageSize"
                            />
                        </div>
                    </el-tab-pane>
<!--               暂无数据显示     -->
                    <el-tab-pane v-if="basicTypeList.length <= 0" label="暂无数据" name="暂无数据" >
                        <!-- 字典数据 -->
                        <div>
                            <el-row :gutter="10" class="mb8">
                                <el-col :span="1.5">
                                    <el-button type="primary" size="medium" @click="handleDictType">数据字典管理</el-button>
                                </el-col>
                            </el-row>
                            <!--  搜索栏  -->
                            <el-form :model="queryParams" ref="queryForm" style="margin-top: 10px;" :inline="true" label-width="100px">
                                <el-form-item label="字典名称" prop="name">
                                    <el-input v-model="queryParams.name" placeholder="请输入字典名称" clearable size="small"/>
                                </el-form-item>

                                <el-form-item label="字典编号" prop="code">
                                    <el-input v-model="queryParams.code"
                                            placeholder="请输入完整编号" clearable size="small"
                                    />
                                </el-form-item>

                                <el-form-item style="margin-left: 10px;">
                                    <el-button type="primary" icon="el-icon-search" size="mini"  @click="getLevelThreedata">搜索</el-button>
                                    <el-button icon="el-icon-refresh" size="mini" style="margin-left: 10px;"  @click="resetQuery" >重置</el-button>
                                </el-form-item>
                            </el-form>

                            <el-table v-loading="loading" :data="basicDataList.slice((currentPage-1)*pageSize,currentPage*pageSize)" max-height="280" >
                                <el-table-column align="center" type="index" label="序号" ></el-table-column>
                                <el-table-column label="中文名称" align="center" prop="name"  />
                                <el-table-column label="英文名称" align="center" prop="enName"  />
                                <el-table-column label="编号" align="center" prop="code" />
                                <el-table-column label="创建时间" align="center" prop="creationDate" width="180">
                                    <template slot-scope="scope">
                                        <span>{{ parseTime(scope.row.creationDate) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                                    <template slot-scope="scope">
                                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEditDictData(scope.row)">编辑</el-button>
                                        <el-button size="mini" type="text" icon="el-icon-delete" @click="onDelete(scope.row.id)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <pagination
                                    v-show="basicDataList.length>0"
                                    :total="basicDataList.length"
                                    :page.sync="currentPage"
                                    :limit.sync="pageSize"
                            />
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>

<!--   业务对象管理  -->
        <el-drawer :title="title" :visible.sync="businessDataOpen" v-if="businessDataOpen" size="60%" append-to-body>
                <filetab @submitForm="getList" @cancelDialog="cancel"></filetab>
        </el-drawer>

        <!--   数据字典管理  -->
        <el-drawer :title="title" :visible.sync="basicTypeOpen" v-if="basicTypeOpen" size="60%" append-to-body>
                <dict-type  @submitForm="initLevelTwodata" :activeName="activeName" @cancelDialog="cancel"></dict-type>
        </el-drawer>

        <!-- 添加/编辑字典类型对象 -->
        <el-drawer :title="title" :visible.sync="open" v-if="open" size="30%" :before-close="cancel" :destroy-on-close="true" append-to-body>
                <dict-data-form :dictDataForm="dictDataForm"  @submitForm="getLevelThreedata" @cancelDialog="cancel"></dict-data-form>
        </el-drawer>

    </div>
</template>

<script>
    import {deleteLevelTwoType, getLevelThreeType, getLevelTwoType, searchmain} from "@/api/basicdata/basictype";
    import dictDataForm from "./form/dictDataForm";
    import filetab from "./filetab";
    import dictType from "./dictType";
    import businessForm from "@/views/basicdata/basictype/form/businessForm";

    export default {
        name: "index",
        components: {
            dictDataForm,
            filetab,
            dictType
        },
        data() {
            return {
                // 遮罩层
                loading: false,
                // 业务对象选项卡Name
                activeName: undefined,
                // 字典类型NamId
                activeTypeName: undefined,
                // 字典类型Name
                typeName: undefined,
                // 业务对象表格数据
                businessDataList: [],
                // 字典类型
                basicTypeList: [],
                // 字典数据
                basicDataList: [],
                // 分页
                currentPage: 1,
                currentIndex: '',
                pageSize: 10,
                // 弹出层标题
                title: "",
                // 业务对象管理弹出层
                businessDataOpen: false,
                // 字典类型管理弹出层
                basicTypeOpen: false,
                // 是否显示字典数据弹出层
                open: false,
                // 查询参数
                queryParams: {
                    name: undefined,
                    code: undefined,
                    typeId: undefined,
                    pcode: '0',
                },
                // 字典数据表单
                dictDataForm:{
                    code: '',
                    name: '',
                    enName: '',
                    pcode: '0',
                    typeId: undefined,
                    status: '1',
                    id: undefined
                },
            };
        },
        created() {
            //初始化业务对象信息
            this.getList({});
        },
        methods: {
            // 查询业务对象
            getList(data) {
                searchmain({'searchParams': data}).then(res => {
                    this.businessDataList = res.responseBody
                    // 默认绑定首个选项卡
                    this.activeName = this.businessDataList[0].id;
                    // 获取二级字典类型
                    this.queryParams.typeId = this.activeName;
                    this.initLevelTwodata();
                })
            },

            /** 获取二级字典类型 */
            initLevelTwodata() {
                const data = {
                    'searchParams': this.queryParams
                }
                getLevelTwoType(data).then(res => {
                    this.basicTypeList = res.responseBody.result
                    if (this.basicTypeList.length <= 0) {
                        this.activeTypeName = "暂无数据";
                        this.typeName = "暂无数据";
                    } else {
                        // 默认绑定字典类型首个选项卡
                        this.activeTypeName = this.basicTypeList[0].code;
                        this.typeName = this.basicTypeList[0].name;
                    }
                //    获取三级字典数据
                    this.queryParams.pcode = this.activeTypeName;
                    this.getLevelThreedata();

                })
            },

            /** 获取字典三级数据 */
            getLevelThreedata() {
                this.loading = true
                const data = {
                    'searchParams': this.queryParams
                }
                getLevelThreeType(data).then(res => {
                    this.basicDataList = res.responseBody.result
                    this.loading = false
                })
            },

            // 选中业务对象触发事件
            handleClick(tab, event) {
                // console.log(tab, event);
                // console.log("== 业务对象Id ===",this.activeName);
                // 获取业务对象对应二级字典类型
                this.queryParams.typeId = this.activeName;
                this.queryParams.pcode = '0'
                this.initLevelTwodata(this.queryParams);
            },

            // 选中字典类型触发事件
            handleTypeClick(tab, event) {
                // console.log(tab,event);
                const typeName = tab.$options.propsData.label;
                // console.log("== 字典类型Code ===",this.activeTypeName);
                // console.log("== 字典类型Name ===",typeName);
                this.typeName = typeName;
                // 获取字典类型对应3级字典数据
                this.queryParams.pcode = this.activeTypeName;
                this.getLevelThreedata(this.queryParams);
            },

            /** 业务对象管理按钮操作 */
            handleBusinessData() {
                this.businessDataOpen = true;
                this.title = "业务对象管理";
            },

            /** 数据字典管理按钮操作 */
            handleDictType() {
                this.basicTypeOpen = true;
                this.title = "数据字典管理";
            },

            /** 新增字典数据按钮操作 */
            handleDictData() {
                // 所属业务对象Id
                this.dictDataForm.typeId = this.activeName;
                // 所属字典类型Code
                this.dictDataForm.pcode = this.activeTypeName;
                this.open = true;
                this.title = "添加字典数据";
            },

            /** 修改字典数据按钮操作 */
            handleEditDictData(row) {
                // 所属业务对象Id
                this.dictDataForm.typeId = this.activeName;
                // 所属字典类型Code
                this.dictDataForm.pcode = this.activeTypeName;
                this.dictDataForm.id = row.id
                this.dictDataForm.code = row.code
                this.dictDataForm.enName = row.enName
                this.dictDataForm.name = row.name
                this.open = true;
                this.title = "编辑字典数据";
            },

            /** 删除字典数据按钮操作 */
            onDelete(id) {
                this.$confirm('确定要删除吗?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function() {
                    return deleteLevelTwoType(id);
                }).then(res => {
                    if (res.retCode === '200') {
                        this.$message.success('删除成功')
                        this.getLevelThreedata();
                    } else {
                        // console.log(res)
                        this.$message.error('删除失败' + res.retCode)
                    }
                })
            },

            /** 重置按钮操作 */
            resetQuery() {
                // console.log(this);
                // this.resetForm("queryForm");
                this.queryParams.name = undefined;
                this.queryParams.code = undefined;
                this.getLevelThreedata();
            },

            // 取消按钮
            cancel(done) {
                if (done !== undefined) {
                    done();//关闭抽屉
                }
                this.businessDataOpen = false;
                this.basicTypeOpen = false;
                this.open = false;
                this.title = '';
                this.dictDataForm.id = undefined;
                this.dictDataForm.code = '';
                this.dictDataForm.name = '';
                this.dictDataForm.enName = '';
            },
        }
    }
</script>
